<template>
  <vxe-layout-container vertical>
    <vxe-row style="padding: 10px;">
      <vxe-col span="8">
        <vxe-card title="订单金额" class="cardItem">
          <template #extra>
            <vxe-button circle icon="vxe-icon-refresh" size="mini" @click="handleOrderRefresh"></vxe-button>
          </template>
          <div ref="orderChart" class="cardItemDiv"></div>
        </vxe-card>
      </vxe-col>
      <vxe-col span="8">
        <vxe-card title="收款情况" class="cardItem">
          <template #extra>
            <vxe-button circle icon="vxe-icon-refresh" size="mini" @click="handleReceiveRefresh"></vxe-button>
          </template>
          <div ref="receiveChart" class="cardItemDiv"></div>
        </vxe-card>
      </vxe-col>
      <vxe-col span="8">
        <vxe-card title="开支情况" class="cardItem">
          <template #extra>
            <vxe-button circle icon="vxe-icon-refresh" size="mini" @click="handleExpensesRefresh"></vxe-button>
          </template>
          <div ref="expensesChart" class="cardItemDiv"></div>
        </vxe-card>
      </vxe-col>
    </vxe-row>
    
      <vxe-row style="padding: 10px;">
        <Query :queryConfig="QueryConfig" @QueryEvent="handleQuery"></Query>
      </vxe-row>
      <vxe-row style="padding: 10px;">
        <vxe-grid ref="maingrid" v-bind="GridOptions">
        </vxe-grid>       
      </vxe-row>
      <vxe-row style="padding: 10px;">
      <vxe-pager :align="PagerConfig.align" :size="componentSize" :current-page.sync="PagerConfig.currentPage"
          :page-size.sync="PagerConfig.pageSize" :total="PagerConfig.total" @page-change="handlePageChange"></vxe-pager>
      </vxe-row>
    

  </vxe-layout-container>

</template>
<style scoped>
.cardItem {
  width: 98%;
  height: 360px;
}

.cardItemDiv {
  width: 100%;
  height: 100%;
}
</style>
<script>
import ReportFinance from './index.js';
export default ReportFinance;
</script>
